<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>全部商户</span>
      <div>
        <!-- <el-button type="primary" v-if="userinfo.rolesId == '1' || userinfo.rolesId == '8'" @click="setupshop()">开通总分店</el-button> -->
        <el-button type="primary" v-if="userinfo.rolesId == '1' || userinfo.rolesId == '8'" @click="changeBDbtn()">切换</el-button>
        <el-button type="primary" @click="addmerchants()">新增商户</el-button>
        <el-button type="primary" :disabled="exxxx" @click="merchantexcel"><i class="el-icon-download"></i>导出</el-button>
        <el-button icon="el-icon-refresh" @click="refresh()"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem" v-if="userinfo.rolesId != 4">
            <el-form ref="conditions" :model="conditions">
              <el-select
                v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8 || userinfo.rolesId == 9"
                v-model="conditions.servicelevel"
                placeholder="服务商级别"
                @change="servicelevel"
              >
                <el-option keys="1" label="一级服务商" value="1"></el-option>
                <el-option keys="2" label="二级服务商" value="2"></el-option>
              </el-select>

              <el-autocomplete
                v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8 || userinfo.rolesId == 2 || userinfo.rolesId == 9"
                class="servicename"
                v-model.trim="conditions.servicename"
                :fetch-suggestions="querySearch"
                placeholder="服务商名称"
                @select="serviceid"
              ></el-autocomplete>
              <el-autocomplete
                class="BDname"
                v-model.trim="conditions.BDname"
                :fetch-suggestions="BDname"
                placeholder="业态"
                @select="BDid"
              ></el-autocomplete>
            </el-form>
          </div>
          <div class="leftitem">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-select v-model="conditions.merchantsstate" placeholder="商户状态">
                <el-option keys="3" label="正常" value="0"></el-option>
                <el-option keys="4" label="停用" value="98"></el-option>
                <el-option keys="4" label="审核中" value="1"></el-option>
                <el-option keys="4" label="驳回" value="9"></el-option>
                <!-- <el-option keys="4" label="通道审核中" value="10"></el-option> -->
              </el-select>
              <el-input
                class="merchants"
                v-model.trim="conditions.merchantsno"
                @keyup.enter.native="soso"
                placeholder="商户简称/商户名称/商户号"
              ></el-input>
            </el-form>
          </div>
          <div class="leftitem">
            <el-form label-width="80px">
              <el-select v-model="wx1code" placeholder="行业" @change="wx2fun">
                <el-option
                  v-for="(value, index) in wx1arr"
                  :key="index"
                  :label="value.firstname"
                  :value="value.id"
                ></el-option>
              </el-select>
              <el-select v-model="conditions.wx1s" placeholder="细分行业">
                <el-option
                  v-for="(value, index) in wx2arr"
                  :key="index"
                  :value="value.id"
                  :label="value.secondname"
                ></el-option>
              </el-select>
              <el-input
                class="merchants1"
                v-model.trim="conditions.contactName"
                @keyup.enter.native="soso"
                placeholder="商户联系人"
              ></el-input>
            </el-form>
          </div>
          <div class="leftitem">
            <el-form label-width="80px">
              <el-select v-model="payType" placeholder="支付方式">
                <el-option keys="1" label="支付宝" :value="300"></el-option>
                <el-option keys="2" label="微信" :value="400"></el-option>
                <el-option keys="3" label="云闪付" :value="600"></el-option>
              </el-select>
              <el-select v-model="channelType" placeholder="通道类型">
                <el-option
                  v-for="(value, index) in channelTypeList"
                  :key="index"
                  :label="value.options"
                  :value="value.code"
                ></el-option>
              </el-select>
            </el-form>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-select v-model="conditions.province" placeholder="所在省" @change="city">
                <el-option
                  v-for="(item, index) in provincearr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                  :codeid="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="conditions.city" placeholder="所在市">
                <el-option
                  v-for="(value, index) in cityarr"
                  :key="index"
                  :label="value.name"
                  :value="value.code"
                ></el-option>
              </el-select>
            </el-form>
          </div>
          <div class="rightitem">
            <div class="block">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </div>
          </div>
          <div class="rightitem" v-if="userinfo.rolesId == 1 || userinfo.rolesId == 2 || userinfo.rolesId == 8 || userinfo.rolesId == 9">
            <el-form label-width="80px">
              <!-- <el-select class="servicename1" v-model="dimension"  placeholder="选择维度" @change="dimension_menu">
                <el-option keys="1" label="一级服务商" :value="2"></el-option>
                <el-option keys="2" label="二级服务商" :value="3"></el-option>
                <el-option keys="2" label="业态" :value="4"></el-option>
                <el-option keys="2" label="商户" :value="5"></el-option>
                <el-option keys="2" label="门店" :value="6"></el-option>
              </el-select> -->
              <el-autocomplete class="servicename" v-model.trim="tagname" :fetch-suggestions="querySearch_tag" @select="serviceid_tag" placeholder="标签名称" :trigger-on-focus="false"></el-autocomplete>
            </el-form>
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="statistical">
        <div class="statisticalitem">
          <div>总商户数</div>
          <div>
            <span class="red">{{merchantsinfo.total}}</span> 家
          </div>
        </div>
        <div class="statisticalitem">
          <div>动销商户数</div>
          <div>
            <span class="red">{{merchantsinfo.active}}</span> 家
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column
            label="商户号?商户简称/商户名"
            width="240"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div class="position" v-if=" scope.row.pid == '-1'">总</div>
              <div class="position greens" v-if=" scope.row.pid != '-1' && scope.row.pid">分</div>
              <div>{{ scope.row.merchantNo}}</div>
              <div>{{ scope.row.merchantShortName }}/{{scope.row.merchantName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="所在省?所在市" width="80" align="center" :render-header="renderheader">
            <template slot-scope="scope">
              <div>{{scope.row.merchantProvince}}</div>
              <div>{{scope.row.merchantCity}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="业态?服务商"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{scope.row.bdName}}</div>
              <div>{{scope.row.agent2Name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="使用通道" align="center" :render-header="renderheader">
            <template slot-scope="scope">
              <div>微信-{{scope.row.wxChannelName}}
                <span v-if="scope.row.wxChannelStatus == 0" class="hui">-审核中</span>
                <span v-if="scope.row.wxChannelStatus == 1" class="green">-通过</span>
                <span v-if="scope.row.wxChannelStatus == 2" class="red">-驳回</span>
                <span v-if="scope.row.wxChannelStatus == 3" class="blue">-预审核通过</span>
              </div>
              <div>支付宝-{{scope.row.aliChannelName}}
                <span v-if="scope.row.aliChannelStatus == 0" class="hui">-审核中</span>
                <span v-if="scope.row.aliChannelStatus == 1" class="green">-通过</span>
                <span v-if="scope.row.aliChannelStatus == 2" class="red">-驳回</span>
                <span v-if="scope.row.aliChannelStatus == 3" class="blue">-预审核通过</span>
              </div>
              <div v-if="scope.row.uniChannelId !== null">云闪付-{{scope.row.uniChannelName}}
                <span v-if="scope.row.uniChannelStatus == 0" class="hui">-审核中</span>
                <span v-if="scope.row.uniChannelStatus == 1" class="green">-通过</span>
                <span v-if="scope.row.uniChannelStatus == 2" class="red">-驳回</span>
                <span v-if="scope.row.uniChannelStatus == 3" class="blue">-预审核通过</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="merchantMccName" label="所属行业" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column label="商户状态" width="80" align="center">
            <template slot-scope="scope">
              <div class="green" v-if="scope.row.status == 0 || scope.row.status == 10">正常<span v-if="scope.row.reviewedReason"></span></div>
              <div class="hui" v-if="scope.row.status == 1" >运营审核中</div>
              <div class="red" v-if="scope.row.status == 9" >运营驳回</div>
              <div class="red" v-if="scope.row.status == 98" >停用</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="140">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="joinmerchantsinfo(scope.row)"
                :valu="scope.row.merchantNo"
              >详情</el-button>
              <el-button
                v-if="scope.row.pid != '-1'"
                type="text"
                size="small"
                @click="addshop(scope.row.merchantShortName,scope.row.id)"
              >新增门店</el-button>
                <!-- <el-button
                v-if="scope.row.pid == '-1'"
                type="text"
                size="small"
                @click="chainclose(scope.row.id)"
              >关闭总门店</el-button> -->
              <el-button
                v-if="scope.row.status == 0 || scope.row.status == 10"
                type="text"
                size="small"
                @click="blockups(scope.row.id)"
              >停用</el-button>
              <el-button type="text" size="small" v-if="scope.row.status == 98" @click="merchantenable(scope.row.id)">启用</el-button>
              <el-button type="text" size="small" v-if="oeminfo.delMer != 0" @click="merchantremove(scope.row.id)">注销</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :current-page.sync="cur_page"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>
      <!-- 新增门店 -->
      <el-dialog v-dialogDrag title="新增门店" :visible.sync="visible"  width="45%" :close-on-click-modal="false">
        <el-form
          :model="addmendian"
          status-icon
          ref="addmendian"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="所属商户">{{shopname}}</el-form-item>
          <el-form-item :required="true" label="门店名称">
            <el-input type="text" v-model.trim="addmendian.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="门店电话">
            <el-input type="text" v-model.trim="addmendian.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="门店地址">
            <el-input type="text" v-model.trim="addmendian.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系人">
            <el-input type="text" v-model.trim="addmendian.contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系人手机号">
            <el-input type="text" v-model.trim="addmendian.contactphone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="银联终端号">
            <el-input type="text" v-model.trim="addmendian.bank" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="外部门店编号">
            <el-input type="text" v-model.trim="addmendian.alias" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="addshopfun()">确定</el-button>
        </span>
      </el-dialog>

      <!-- 切换业态 -->
      <el-dialog v-dialogDrag title="切换业态" :visible.sync="changeBD"  width="45%" :close-on-click-modal="false">
        <el-form
          :model="addmendian"
          status-icon
          ref="addmendian"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="商户名称:">
            <span v-for="(item,index) in multipleSelection" :key="index">{{item.merchantName}}，</span>
          </el-form-item>
          <el-form-item label="业态:">
            <el-autocomplete
                v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8"
                class="wid100"
                v-model="changeBDdata.agent1"
                :fetch-suggestions="querySearch1"
                placeholder="请选择一级服务商"
                @select="serviceid1"
            ></el-autocomplete>
            <el-autocomplete
              v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8 || userinfo.rolesId == 2"
              class="wid100"
              v-model="changeBDdata.agent2"
              :fetch-suggestions="querySearch2"
              placeholder="请选择二级服务商"
              @select="serviceid2"
          ></el-autocomplete>
          <el-autocomplete
                v-if="userinfo.rolesId != 4 && userinfo.rolesId != 5 && userinfo.rolesId != 6"
              class="wid100"
              v-model="changeBDdata.BDname"
              :fetch-suggestions="BDname"
              placeholder="业态"
              @select="BDid1"
          ></el-autocomplete>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeBD = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="changeBDok()">确定</el-button>
        </span>
      </el-dialog>

      <!-- 总分店模式配置 -->
      <el-dialog v-dialogDrag title="总分店模式配置" :visible.sync="visible1"  width="45%" :close-on-click-modal="false">
        <el-form
          :model="setupshops"
          status-icon
          ref="setupshops"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="角色选择" >
            <el-radio-group v-model="setupshops.type" @change="setupshopstype">
              <el-radio label="-1">总店</el-radio>
              <el-radio  label="2">分店</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择总店" v-if="setupshops.type == 2">
            <!-- <el-input :disabled="(setupshops.type == 1)?true:false" type="text" v-model.trim="addmendian.phone" autocomplete="off"></el-input> -->
             <el-autocomplete
                v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8 || userinfo.rolesId == 2 || userinfo.rolesId == 9"
                class="servicename"
                v-model.trim="setupshops.dianming"
                :fetch-suggestions="querySearch3"
                placeholder="选择总店"
                @select="dianming"
              ></el-autocomplete>
          </el-form-item>
          <el-form-item label="选择营业时间" v-if="setupshops.type == 2">
             <!-- <el-time-picker
             :disabled="(setupshops.type == 1)?true:false"
              is-range
              v-model="setupshops.time"
              value-format="HH:mm"
              format="HH:mm"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker> -->
            <el-time-picker
              v-model="setupshops.openTime"
               value-format="HH:mm"
              format="HH:mm"
              placeholder="开始时间">
            </el-time-picker>至
            <el-time-picker
              v-model="setupshops.closeTime"
               value-format="HH:mm"
              format="HH:mm"
              placeholder="结束时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="是否限额" v-if="setupshops.type == 2">
            <el-radio-group v-model="setupshops.permissions" :disabled="(setupshops.type == 1)?true:false">
              <el-radio label="1">是</el-radio>
              <el-radio  label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="限额额度" v-if="setupshops.type == 2">
            <el-input style="width:80%" placeholder="请输入限额额度" :disabled="(setupshops.permissions == 2)?true:false"  type="text" v-model.trim="setupshops.lines" autocomplete="off"></el-input>元
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible1 = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="setupshopok()">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getservice,
  getBD,
  province,
  city,
  wx1,
  wx2,
  merchantlist,
  getActiveCount,
  addshop,
  blockup,
  merchantremove,
  merchantenable,
  merchanttransfer,
  myMerchantExcel,
  getlabelTagList,
  getDimensionTagList,
  getChannelList,
  allmerchantlist,
  chainopen,
  chainclose
} from "@/api/api";
import axios from "axios";
import bus from '../common/bus';
export default {
  name: "baseform",
  data: function() {
    return {
      oeminfo:{},
      tagsList:[],
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      visible: false,
      loading: true,
      changeBD: false,
      exxxx: false,
      visible1: false,
      setupshops:{
        type:'-1',
        openTime:'',
        closeTime:'',
        permissions:'',
        lines:'',
        pid:'-1'
      },
      servicearr: [],
      servicearr1: [],
      BDarr: [],
      provincearr: [],
      cityarr: [],
      wx1arr: [],
      ids:[],
      wx1code: "",
      wx2arr: "",
      merchantarr: [],
      combined: 10,
      pageCount: "",
      merchantsinfo: "",
      shopname: "",
      shopid: "",
      date: "",
      merarr:[],
      addmendian: {
        name: "",
        phone: "",
        address: "",
        contact: "",
        contactphone: "",
        bank: "",
        alias:""
      },
      changeBDdata:{
        agent1:'',
        agent2:'',
        BDname:''
      },
      conditions: {
        servicelevel: "",
        servicename: "",
        BDname: "",
        merchantsstate: "",
        merchantsno: "",
        province: "",
        provincecode: "",
        city: "",
        stardate: "",
        enddate: "",
        serviceid: "",
        BDid: "",
        wx1s: ""
      },
      userinfo: {

      },
      payType:'',//支付方式
      channelType:'',//通道类型
      channelTypeList:[],
      dimension:'',//选择维度
      tagname:'',//标签名
      label_all:[],//标签模糊查询
      tagId:'',
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if(sessionStorage.getItem('oeminfo') != 'null'){
      this.oeminfo = JSON.parse(sessionStorage.getItem('oeminfo'))
    }
    
    // 根据角色区别模糊搜索内容
    if (this.userinfo.rolesId == 2 || this.userinfo.rolesId == 3) {
      getservice({
        type: 2,
        parentid: this.userinfo.fid
      }).then(res => {
        // console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id
          });
        }
      });
      this.getBD(this.userinfo.fid);
    } else {
      this.getBD();
    }
    this.province();
    this.wx1();
    this.merchantlist();
    if(this.userinfo.rolesId == 2){
      this.conditions.servicelevel == 2
    }else if(this.userinfo.rolesId == 1){  
       this.conditions.servicelevel == 1
    }
    this.getChannelList()
    // let _this = this
    //  bus.$on('tags', msg => {
    //    console.log(msg)
    //    _this.tagsList = msg
    // })
  },
  methods: {
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    // 刷新
    refresh() {
      // this.$router.replace({
      //   path: "/refresh",
      //   query: {
      //     t: Date.now()
      //   }
      // });
      this.loading = true;
      this.merchantlist(this.conditions.servicelevel);
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1])
      ]);
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.merchantlist(this.conditions.servicelevel);
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;

      this.merchantlist(this.conditions.servicelevel);

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val;
      
    },
    joinmerchantsinfo(val) {
      console.log(val.merchantName)
      this.$router.push({
        path: "/merchantsinfo",
      });
      sessionStorage.setItem('merchants_id',JSON.stringify(val.id))
      sessionStorage.setItem('merchants_merchantName',JSON.stringify(val.merchantName))
    },
    //  重置
    reset() {
      this.date = "";
      this.conditions.servicelevel = "";
      this.conditions.servicename = "";
      this.conditions.BDname = "";
      this.conditions.merchantsstate = "";
      this.conditions.merchantsno = "";
      this.conditions.province = "";
      this.conditions.provincecode = "";
      this.conditions.city = "";
      this.conditions.stardate = "";
      this.conditions.enddate = "";
      this.conditions.serviceid = "";
      this.conditions.BDid = "";
      this.conditions.wx1s = "";
      this.conditions.contactName = "";
      this.wx1code = "";
      this.cur_page = 1;
      this.dimension = ''
      this.tagname = ''
      this.tagId = ''
      this.payType = ''
      this.channelType = ''
    },
    // 搜索
    soso() {
      this.cur_page = 1;
      if(this.channelType !== '' && this.payType == ''){
        this.$message.error('请先选择支付方式')
        return false
      }
      if(this.payType !== '' && this.channelType == ''){
        this.$message.error('请选择通道类型')
        return false
      }
      this.loading = true;
      if(!this.conditions.servicename){
        this.conditions.serviceid = ''
      }
       if(!this.conditions.BDname){
        this.conditions.BDid = ''
      }
      if (this.conditions.servicelevel == 1) {
        this.merchantlist("1");
      } else if (this.conditions.servicelevel == 2) {
        this.merchantlist("2");
      } else {
        this.merchantlist("2");
      }
    },
    getChannelList(){
      getChannelList({}).then(res => {
        if(res.code ==405){
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        }else if (res.code == 200) {
          this.channelTypeList = res.data
        }else if(res.code == 500){
          this.$message.error(res.message);
        }
      })
    },
    // 服务商名称
    querySearch(queryString, cb) {
      let servicearr = this.servicearr;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 切换BD服务商名称
    querySearch1(queryString, cb) {
      let servicearr = this.servicearr1;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
       // 二级服务商
    querySearch2(queryString, cb) {
      let servicearr = this.servicearr2;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 总分店
    querySearch3(queryString, cb) {
      let merarr = this.merarr;
      let results = queryString
        ? merarr.filter(this.createFilter(queryString))
        : merarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
      // 根据一级查2级
    serviceid1(item){
        this.servicearr2 =  []
        this.changeBDdata.agent2 = '';
        this.changeBDdata.BDname = '';
         getservice({
            type: 2,
            parentid:item.id
        }).then(res => {
            console.log(res);
            for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr2.push({
                value: res.data.rows[i].agentname,
                id: res.data.rows[i].id
            });
            }
        });
        this.conditions.agent1Id = item.id
    },
     // 获取2级
     serviceid2(item){
        this.changeBDdata.agent2Id = item.id
        this.changeBDdata.BDname = '';
       console.log(item)
        this.getBD(item.id)
    },
     BDid1(item) {
      this.changeBDdata.BDid = item.id;
    },
    // 业态
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    BDid(item) {
      this.conditions.BDid = item.id;
    },
    serviceid(item) {
      this.conditions.serviceid = item.id;
      this.getBD(item.id);
    },
    // 服务商级别
    servicelevel(val) {
      console.log(val)
      this.servicearr = [];
      getservice({
        type: val
      }).then(res => {
        // console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id
          });
        }
      });
    },
    // 获取BD
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then(res => {
        // console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id
          });
        }
      });
    },
    //获取省
    province() {
      province().then(res => {
        // console.log(res);
        this.provincearr = res.data;
      });
    },
    //获取市
    city(val) {
      let obj = {};
      obj = this.provincearr.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.id === val; //筛选出匹配数据
      });
      // console.log(obj);
      this.conditions.provincecode = obj.code;
      this.cityarr = "";
      city({
        provinceId: val
      }).then(res => {
        // console.log(res);
        this.cityarr = res.data;
      });
    },
    // 获取行业
    wx1(val) {
      wx1().then(res => {
        this.wx1arr = res.data;
      });
    },
    // 行业二级
    wx2fun(val) {
      this.wx2arr = "";
      wx2({
        wx1Id: val
      }).then(res => {
        // console.log(res);
        this.wx2arr = res.data;
      });
    },
    // 商户列表
    merchantlist(level) {
      let sosolist = {};
      if (level == 1) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          agent1Id: this.conditions.serviceid,
          bdId: this.conditions.BDid,
          startTime: this.date[0],
          finishTime: this.date[1],
          cityCode: this.conditions.city,
          merchantMcc2: this.conditions.wx1s,
          provinceCode: this.conditions.provincecode,
          keywords: this.conditions.merchantsno,
          status: this.conditions.merchantsstate,
          tagId: this.tagId,
          status: this.conditions.merchantsstate,
          contactName: this.conditions.contactName,
          payType: this.payType,
          channelType: this.channelType
        };
      } else if (level == 2) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          agent2Id: this.conditions.serviceid,
          bdId: this.conditions.BDid,
          startTime: this.date[0],
          finishTime: this.date[1],
          cityCode: this.conditions.city,
          merchantMcc2: this.conditions.wx1s,
          provinceCode: this.conditions.provincecode,
          keywords: this.conditions.merchantsno,
          status: this.conditions.merchantsstate,
          tagId: this.tagId,
          status: this.conditions.merchantsstate,
          contactName: this.conditions.contactName,
          payType: this.payType,
          channelType: this.channelType
        };
      }else{
         sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          bdId: this.conditions.BDid,
          agent2Id: this.conditions.serviceid,
          startTime: this.date[0],
          finishTime: this.date[1],
          cityCode: this.conditions.city,
          merchantMcc2: this.conditions.wx1s,
          provinceCode: this.conditions.provincecode,
          keywords: this.conditions.merchantsno,
          status: this.conditions.merchantsstate,
          tagId: this.tagId,
          status: this.conditions.merchantsstate,
          contactName: this.conditions.contactName,
          payType: this.payType,
          channelType: this.channelType
        };
      }
      merchantlist(sosolist).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarr = res.data;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false;
        }
      });
      getActiveCount(sosolist).then(res => {
        // console.log(res);
        this.merchantsinfo = res.data;
      });
    },
    // 获取总店
    allmerchantlist(){
        allmerchantlist({
          pid:'-1'
        }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          console.log(res)
            this.merarr = []
            for (var i = 0; i < res.data.rows.length; i++) {
            this.merarr.push({
                value: res.data.rows[i].merchantName,
                id: res.data.rows[i].id
            });
            }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 选取总店
    dianming(val){
      this.setupshops.pid = val.id
    },
    //标签模糊
    querySearch_tag(queryString,cb){
      let that = this
      getDimensionTagList({
        roleId: 5,
        tagwords: this.tagname
      }).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          that.$router.push('/login');
        }else if(res.code == 200){
          that.label_all = []
          for(var i=0;i<res.data.length;i++){
            that.label_all.push({'value':res.data[i].tagName,'id':res.data[i].tagId})
          }
          let servicearr = that.label_all;
          let results = queryString
            ? servicearr.filter(that.createFilter(queryString))
            : servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }else{
          that.$message.error(res.message);
        }
      })
    },
    serviceid_tag(item){
      console.log(item)
      this.tagId = item.id
    },
    // 打开增加门店
    addshop(val, id) {
      this.visible = true;
      this.shopname = val;
      this.shopid = id;
      this.addmendian = {
        name: "",
        phone: "",
        address: "",
        contact: "",
        contactphone: "",
        bank: "",
        alias:""
      }
    },
    // 增加门店
    addshopfun() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      addshop({
        merchantId: this.shopid,
        shopName: this.addmendian.name,
        shopTel: this.addmendian.phone,
        shopAddress: this.addmendian.address,
        managerName: this.addmendian.contact,
        managerMobile: this.addmendian.contactphone,
        terminalNoUni: this.addmendian.bank,
        alias: this.addmendian.alias,
        userId : 1,
        instno: sessionStorage.getItem("instNo"),
        key: sessionStorage.getItem("key")
      }).then(res => {
        if (res.code == 200) {
          loading.close();
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.visible = false;
          this.refresh();
        } else {
          this.$message.error(res.message);
          loading.close();
        }
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
        }
      });
    },
    // 停用门店
    blockups(val) {
      var that = this;
      this.$confirm("是否确定停用？如确定，该商户的支付将停用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          blockup({}, val).then(res => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else if (res.code == 200) {
              this.$message({
                message: "已停用",
                type: "success"
              });
              this.refresh();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 注销门店
    merchantremove(val) {
      this.$confirm("是否确定注销？如确定，该商户将被移除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          merchantremove({}, val).then(res => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else if (res.code == 200) {
              this.$message({
                message: "已注销",
                type: "success"
              });
              this.refresh();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 启用商户
    merchantenable(val) {
      merchantenable({}, val).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "已启用",
            type: "success"
          });
          this.refresh();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 新增门店
    addmerchants(){
      this.$router.push({ path: "/addmerchantss",
          query: { 
                // no: val,
            } 
      });
    },
    
    closetab(){
        console.log(this.tagsList)
        for(var i=0;i<this.tagsList.length;i++){
          if(this.tagsList[i].title == '我的商户'){
             this.tagsList.splice(i, 1)[0]
            bus.$emit('tags', this.tagsList);
            this.$router.push('/audit');
          }
        }
    },

    // 打开切换bdbox
    changeBDbtn(){
      this.changeBDdata = {
        agent1:'',
        agent2:'',
        BDname:'',
      }
      if(this.multipleSelection.length > 0){
        this.changeBD = true
        getservice({
          type: 1,
        }).then(res => {
          // console.log(res);
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr1.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id
            });
          }
        });
      }else{
        this.$message.error('请选择商户');
      }
     
    },
    // 确定切换
    changeBDok(){
      let that = this;
      // console.log(this.changeBDdata.BDid)
      this.ids = []
      for(var item of this.multipleSelection){	
          this.ids.push(item.id)
      }
      if(this.changeBDdata.BDid){
        axios.post(
          this.$store.state.url + '/product/v31/api/merchant/transfer/' +this.changeBDdata.BDid,
            this.ids
          ,
          {
            headers: {
              "Content-Type": "application/json",
              token: sessionStorage.getItem("token")
            }
          }
        ) .then(function(res) {
          console.log(res);
            if (res.data.code == 405) {
              sessionStorage.removeItem("token");
              that.$router.push("/login");
            } else if (res.data.code == 200) {
              that.$message({
                message: "切换成功",
                type: "success"
              });
              that.refresh();
              that.changeBD = false
            } else {
              that.$message.error(res.data.message);
            }
        })
      }else{
        this.$message.error('请选择业态');
      }
       
    },
    // 导出商户
    //导出
    merchantexcel(){
      let sosolist = {};
      if (this.conditions.servicelevel == 1) {
        sosolist = {
          agent1Id: this.conditions.serviceid,
          bdId: this.conditions.BDid,
          startTime: this.date[0],
          finishTime: this.date[1],
          cityCode: this.conditions.city,
          merchantMcc2: this.conditions.wx1s,
          provinceCode: this.conditions.provincecode,
          keywords: this.conditions.merchantsno,
          status: this.conditions.merchantsstate,
          tagId: this.tagId,
          payType: this.payType,
          channelType: this.channelType
        };
      } else if (this.conditions.servicelevel == 2) {
        sosolist = {
          agent2Id: this.conditions.serviceid,
          bdId: this.conditions.BDid,
          startTime: this.date[0],
          finishTime: this.date[1],
          cityCode: this.conditions.city,
          merchantMcc2: this.conditions.wx1s,
          provinceCode: this.conditions.provincecode,
          keywords: this.conditions.merchantsno,
          status: this.conditions.merchantsstate,
          tagId: this.tagId,
          payType: this.payType,
          channelType: this.channelType
        };
      }else{
         sosolist = {
          bdId: this.conditions.BDid,
          agent2Id: this.conditions.serviceid,
          startTime: this.date[0],
          finishTime: this.date[1],
          cityCode: this.conditions.city,
          merchantMcc2: this.conditions.wx1s,
          provinceCode: this.conditions.provincecode,
          keywords: this.conditions.merchantsno,
          status: this.conditions.merchantsstate,
          tagId: this.tagId,
          payType: this.payType,
          channelType: this.channelType
        };
      }
      this.exxxx = true;
         const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        myMerchantExcel(sosolist).then(res => {
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
             loading.close();
             this.exxxx = false;
          }else if(res.code == 200){
            let elink = document.createElement('a');
            elink.download = "我的商户.xls";
            elink.href = res.data;
            elink.click();
            loading.close();
            this.exxxx = false;
            }
            else{
              this.$message.error(res.message);
              loading.close();
              this.exxxx = false;
            }
          })
    },
    // 打开总分店弹窗
    setupshop(){
      if(this.multipleSelection.length > 0){
        this.visible1 = true
        this.allmerchantlist()
        console.log(this.multipleSelection)
        
      }else{
        this.$message.error('请选择商户');
      }
      
    },
      // 判断总店分店
    setupshopstype(e){
      console.log(e)
      if(e == '-1'){
        this.setupshops.pid = '-1'
      }
    },
    // 确定总分店
    setupshopok(){
      console.log(this.setupshops)
      let that = this;
      let dianarr = []
      let marid = ''
      for(var item of this.multipleSelection){	
          dianarr.push(item.id)
      }
      marid = dianarr.join(",")
      chainopen({
          id:marid,
          openTime:that.setupshops.openTime,
          closeTime:that.setupshops.closeTime,
          limitFee:that.setupshops.lines,
          pid:that.setupshops.pid,
        }).then(res => {
         if(res.code == 200){
            that.$message({
                message: "开通成功",
                type: "success"
              });
         }else{
           that.$message.error(res.message);
         }
          this.visible1 = false;
          this.refresh();
          this.setupshops={
              type:'-1',
              openTime:'',
              closeTime:'',
              permissions:'',
              lines:'',
              pid:'-1'
          }
        });
    },
    // 关闭总门店
    chainclose(id){
      let that = this;
      console.log(id)
      this.$confirm("是否确定关闭？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          chainopen({
              id:id,
            }).then(res => {
            if(res.code == 200){
                that.$message({
                    message: "已关闭总分店模式",
                    type: "success"
                  });
            }else{
              that.$message.error(res.message);
            }
              this.refresh();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });

      
    },
  }
};
</script>
<style scoped>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.merchants1 {
  width: 40%;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #374459;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  width: 50%;
  text-align: center;
  line-height: 200%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 50%;
}
.servicename1{
  width: 30%;
}
.servicelevel {
  width: 20%;
}
.BDname {
  width: 20%;
}
.red {
  color: #f9607d;
}
.green{
  color: green;
}
.hui{
  color: darkgray;
}
.blue{
  color: blue;
}
.wid100{
  width: 100%;
  margin-bottom: 20px;
}
.position{
  position: absolute;
  left: 0;
  top: 25px;
  background: #f9607d;
  color: #fff;
  padding: 0;
  width: 18px;
  height: 18px;
  line-height: 20px;
  box-sizing: border-box;
  border-radius: 3px;
}
.greens{
  background: green;;
}
</style>